<template>
	<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<a-form-item label="上级部门" prop="parentId">
					<a-tree-select
						v-decorator="['parentId', { rules: [{ required: true, message: '请输入部门名称' }] }]"
						show-search
						style="width: 100%"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						placeholder="请选择归属部门"
						allow-clear
						tree-default-expand-all
					>
						<a-icon slot="suffixIcon" type="smile" />
						<a-tree-select-node key="0-1" value="若依科技" title="若依科技">
							<a-tree-select-node key="0-1-1" value="深圳总公司" title="深圳总公司">
								<a-tree-select-node key="random" value="研发部门" title="研发部门" />
								<a-tree-select-node key="random1" value="市场部门" title="市场部门" />
								<a-tree-select-node key="random2" value="测试部门" title="测试部门" />
								<a-tree-select-node key="random3" value="财务部门" title="财务部门" />
								<a-tree-select-node key="random4" value="运维部门" title="运维部门" />
							</a-tree-select-node>
							<a-tree-select-node key="0-2-1" value="长沙分公司" title="长沙分公司">
								<a-tree-select-node value="市场部" title="市场部">
									<a-tree-select-node value="财务部" title="财务部"></a-tree-select-node>
								</a-tree-select-node>
							</a-tree-select-node>
						</a-tree-select-node>
					</a-tree-select>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<a-form-item label="部门名称" prop="deptName">
					<a-input v-decorator="['deptName', { rules: [{ required: true, message: '请输入部门名称' }] }]"> </a-input>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<!-- <a-form-item label="显示排序" prop="orderNum">
					<a-input-number
						width="80px"
						v-decorator="['orderNum', { rules: [{ required: true, message: '菜单页面要排序' }] }]"
						id="inputNumber"
						:min="1"
						:max="500"
					/>
				</a-form-item> -->
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<a-form-item label="负责人" prop="leader">
					<a-input v-decorator="['leader', { rules: [{}] }]" placeholder="请输入负责人"> </a-input>
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<a-form-item label="联系电话" width="50px">
					<a-input v-decorator="['phonenumber', { rules: [{ whitespace: true }, { validator: phoneCheck.bind(this) }] }]" />
				</a-form-item>
			</a-col>
		</a-row>
		<a-row :gutter="24" :span="12">
			<a-col :span="23" pull="3">
				<a-form-item label="邮箱地址">
					<a-input
						v-decorator="[
							'email',
							{
								rules: [
									{
										type: 'email',
										message: '请输入正确的邮箱!',
									},
									{
										message: '请输入邮箱!',
									},
								],
							},
						]"
					/>
				</a-form-item>
			</a-col>
		</a-row>
		<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
			<a-button type="primary" html-type="submit"> 提交 </a-button>
		</a-form-item>
	</a-form>
</template>

<script>
export default {
	data() {
		return {
			value: 1,
			// value: undefined,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, { name: 'coordinated' }),
		};
	},
	methods: {
		phoneCheck(rule, value, callbackFn) {
			// const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/  // 手机号正则
			// 电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）
			const reg =
				/^(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$/;
			if (!reg.test(value)) {
				callbackFn('联系电话式不正确');
				return;
			}
			callbackFn();
		},
		// 状态选择
		onChange(e) {
			console.log('radio checked', e.target.value);
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		handleSelectChange(value) {
			console.log(value);
			// this.form.setFieldsValue({
			// 	note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
			// });
		},
	},
};
</script>
